<div class="page page-current" id="page-index">
    <header class="bar bar-nav">
        <a class="icon icon-me pull-left open-panel" data-panel=".panel-left"></a>
        <a class="button button-link button-nav pull-right open-popup" data-popup=".popup-about">
            关于
            <span class="icon icon-menu"></span>
        </a>
        <h1 class="title">Alpaca SUI Mobile</h1>
    </header>
    <div class="bar bar-standard bar-footer">
        <a class="icon icon-edit pull-left"></a>
        <a class="icon icon-settings pull-right open-panel" data-panel=".panel-right"></a>
    </div>
    <div class="content native-scroll" id="page-index2">
        <div class="content-inner">
            <div class="content-block-title">示例</div>
            <div class="list-block">
                <ul>
                    <li>
                        <a href="#/main/index/bar" class="item-link item-content">
                            <div class="item-inner">
                                <div class="item-title">标题栏和工具栏</div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#/main/index/btns" class="item-link item-content">
                            <div class="item-inner">
                                <div class="item-title">按钮</div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#/main/index/form" class="item-link item-content">
                            <div class="item-inner">
                                <div class="item-title">表单</div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#/main/index/searchbar" class="item-link item-content">
                            <div class="item-inner">
                                <div class="item-title">搜索栏</div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#/main/index/list" class="item-link item-content">
                            <div class="item-inner">
                                <div class="item-title">列表</div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#/main/index/tabs" class="item-link item-content">
                            <div class="item-inner">
                                <div class="item-title">标签页</div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#/main/index/card" class="item-link item-content">
                            <div class="item-inner">
                                <div class="item-title">卡片</div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#/main/index/grid" class="item-link item-content">
                            <div class="item-inner">
                                <div class="item-title">栅格</div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#/main/index/modal" class="item-link item-content">
                            <div class="item-inner">
                                <div class="item-title">对话框</div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#/main/index/preloader" class="item-link item-content">
                            <div class="item-inner">
                                <div class="item-title">加载提示</div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#/main/index/actions" class="item-link item-content">
                            <div class="item-inner">
                                <div class="item-title">操作表</div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#/main/index/calendar" class="item-link item-content">
                            <div class="item-inner">
                                <div class="item-title">日历</div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#/main/index/picker" class="item-link item-content">
                            <div class="item-inner">
                                <div class="item-title">picker</div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#/main/index/datetimePicker" class="item-link item-content">
                            <div class="item-inner">
                                <div class="item-title">日期时间选择器</div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#/main/index/cityPicker" class="item-link item-content">
                            <div class="item-inner">
                                <div class="item-title">省市区选择器</div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#/main/index/swiper" class="item-link item-content">
                            <div class="item-inner">
                                <div class="item-title">幻灯片</div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#/main/index/photoBrowser" class="item-link item-content">
                            <div class="item-inner">
                                <div class="item-title">图片浏览器</div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#/main/index/pullToRefresh" class="item-link item-content">
                            <div class="item-inner">
                                <div class="item-title">下拉刷新</div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#/main/index/infiniteScroll" class="item-link item-content">
                            <div class="item-inner">
                                <div class="item-title">无限滚动</div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#/main/index/icons" class="item-link item-content">
                            <div class="item-inner">
                                <div class="item-title">图标</div>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="content-block-title">测试</div>
            <div class="list-block">
                <ul>
                    <li>
                        <a href="#/main/index/test" class="item-link item-content">
                            <div class="item-inner">
                                <div class="item-title">测试</div>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="popup popup-about">
    <header class="bar bar-nav">
        <a class="button button-link button-nav pull-right close-popup">
            关闭
        </a>
        <h1 class="title">关于SUI Mobile</h1>
    </header>
    <div class="content">
        <div class="content-inner">
            <div class="content-block">
                <p>SUI Mobile 是阿里巴巴共享业务事业部SDC团队（UED）提供的一套手机UI库。</p>
                <p>我们的目的是为手机千牛、百川以及任何手机端的H5页面提供标准的设计规范和前端实现。</p>
                <p>SUI Mobile并没有重新发明轮子，我们主要参考了 <a href="http://goratchet.com" external="" target="_blank">ratchet</a> 和 <a href="http://framework7.taobao.org/" external=""
                                                                                                                           target="_blank">Framework7</a></p>
                <p>这里只是一个官方示例，详细文档请参考：<a href="http://m.sui.taobao.org/" external="" target="_blank">http://m.sui.taobao.org/</a></p>
                <p></p>
                <p><a class="button close-popup">确定</a></p>
            </div>
        </div>
    </div>
</div>

<div class="panel-overlay"></div>
<!-- Left Panel with Reveal effect -->
<div class="panel panel-left panel-reveal">
    <div class="content-block">
        <p>这是一个侧栏</p>
        <p></p>
        <!-- Click on link with "close-panel" class will close panel -->
        <p><a class="close-panel">关闭</a></p>
    </div>
</div>
<div class="panel panel-right panel-cover">
    <div class="content-block">
        <p>这是右侧栏，panel-cover模式</p>
        <p></p>
        <!-- Click on link with "close-panel" class will close panel -->
        <p><a class="close-panel">关闭</a></p>
    </div>
</div>
